<template>
	<view class="page">
		<view class="modules">
			<view class="module" v-for="(item,index) in items" :key="index">
				<view class="module-content">
					<view class="module-content-title">{{item.title}}</view>
					<view class="module-content-desc">
						<u-image width="32rpx" height="32rpx"
							src="https://file.casugn.com/storecompcard/static/img/general／location@2x_1681724178670.png"></u-image>
						<text class="module-content-desc__text">{{item.addressName}}</text>
					</view>
					<view class="module-content-desc">
						<u-image width="32rpx" height="32rpx"
							src="https://file.casugn.com/storecompcard/static/img/general／schedule@2x_1681724195766.png"></u-image>
						<text class="module-content-desc__text">{{(item.startTime||'').substr(0,16)}}</text>
					</view>
					<view class="module-content-desc">
						<u-image width="32rpx" height="32rpx"
							src="https://file.casugn.com/storecompcard/static/img/general／user@2x_1681724211627.png"></u-image>
						<text class="module-content-desc__text">{{item.initiator}}</text>
					</view>
				</view>
				<view class="module-btns">
					<u-button :plain="true" color="#276AEE" loadingSize="28" :loading="item.loading" loadingText="拒绝邀请"
						throttleTime="500" :customStyle="customStyle1" @click="refuseHandle(item,index)">拒绝邀请</u-button>
					<u-button :plain="true" color="#276AEE" loadingSize="28" :loading="item.loading" loadingText="接受邀请"
						throttleTime="500" :customStyle="customStyle2" @click="acceptHandle(item,index)">接受邀请</u-button>
				</view>
			</view>
		</view>

		<template v-if="loadMoreStatus!=='loading'&&!items.length">
			<u-empty marginTop="20vh" width="240rpx" height="240rpx" text="暂时没有组局" textSize="28rpx" textColor="#86909C"
				icon="https://file.casugn.com/storecompcard/temp/空页面@2x(14)_1681113729843.png"></u-empty>
		</template>

		<template v-if="loadMoreStatus==='loading'">
			<u-loadmore height="100" fontSize="28rpx" iconSize="34rpx" :status="loadMoreStatus" @loadmore="scrolltolower" />
		</template>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		data() {
			let customStyle = {
				'width': 'auto',
				'height': '64rpx',
				'margin': '0',
				'font-size': '28rpx',
				'line-height': '64rpx',
				'border-radius': '4rpx',
				'border': '0',
			}
			return {
				customStyle1: { ...customStyle, 'color': '#276AEE', 'background-color': '#E9F0FD' },
				customStyle2: { ...customStyle, 'color': '#ffffff', 'background-color': '#276AEE', 'margin-left': '80rpx' },

				items: [],
				pageNo: 1,
				pageSize: 10,
				loadMoreStatus: 'nomore', //loading / nomore / loadmore
			}
		},
		computed: {
			...mapGetters(['openId']),
		},
		onLoad() {
			this.loadMoreStatus = 'loading'
			this.getDBData()
		},
		onPullDownRefresh() {
			this.refresherrefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.scrolltolower()
		},
		methods: {
			refuseHandle(item, index) {
				// console.log(item, index);
				uni.showModal({
					title: '提示',
					content: '确定拒绝邀请?',
					success: async (res) => {
						if (res.confirm) {
							this.updateGroupStatus(item.id, 2, index)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			acceptHandle(item, index) {
				// console.log(item, index);
				uni.showModal({
					title: '提示',
					content: '确定接受邀请?',
					success: async (res) => {
						if (res.confirm) {
							this.updateGroupStatus(item.id, 1, index)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			async updateGroupStatus(groupId, status, index) {
				let params = {
					openId: this.openId,
					groupId: groupId,
					status: 1 //待处理、同意、拒绝   status 是  0 1  2   
				}
				let res = await this.$api.handleGroupMembers(params)
				if (res.success) {
					uni.showToast({ title: '提交成功！', icon: 'none' });
					this.items.splice(index, 1)
				} else {
					uni.showToast({ title: res.message || '提交失败！', icon: 'none' });
				}
			},
			async getDBData(type = 'refresh') {
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					openId: this.openId,
					category: 2, // 全部0 我发布1 我参加2
					status: 0, // 未处理0 参加1 拒绝2
					column: 'createTime',
					order: 'desc',
				}
				let res = await this.$api.queryWaitGroupPage(params)
				if (res.success) {
					let tData = res.result.records
					if (type === 'refresh') {
						this.items = tData
					}
					if (type === 'add') {
						this.items.push(...tData)
					}
					console.log('组局邀请列表：', this.items);
					this.loadMoreStatus = res.result.pages > res.result.current ? 'loadmore' : 'nomore'
				} else {
					this.loadMoreStatus = 'nomore'
				}
			},
			scrolltolower() {
				if (this.loadMoreStatus === 'nomore') {
					return
				}
				this.loadMoreStatus = 'loading';
				this.pageNo += 1
				this.getDBData('add')
			},
			refresherrefresh() {
				this.loadMoreStatus = 'loading'
				this.items = []
				this.pageNo = 1
				setTimeout(async () => {
					await this.getDBData('refresh')
				}, 500)
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}

	.page {
		padding-top: 32rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.modules {
		padding: 0 24rpx 32rpx;

		.module {
			background-color: #fff;
			border-radius: 16rpx;

			&:nth-child(n+2) {
				margin-top: 24rpx;
			}

			.module-content {
				position: relative;
				padding: 24rpx 32rpx;

				&::before {
					content: "";
					position: absolute;
					bottom: 0;
					left: 32rpx;
					right: 32rpx;
					border-bottom: 2rpx dashed #E5E6EB;
				}

				.module-content-title {
					font-size: 32rpx;
					font-weight: 600;
					color: #1D2129;
					line-height: 44rpx;
				}

				.module-content-desc {
					display: flex;
					align-items: center;

					.module-content-desc__text {
						margin-left: 16rpx;
						font-size: 28rpx;
						color: #4E5969;
						line-height: 40rpx;
					}
				}

				.module-content-title+.module-content-desc {
					margin-top: 16rpx;
				}

				.module-content-desc+.module-content-desc {
					margin-top: 24rpx;
				}
			}

			.module-btns {
				padding: 24rpx 32rpx;

				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>